<template>
  <div style="padding-top:46px">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="设置" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <div class="content">
      <div class="content_photo">
        <i class="iconfont icon-yonghutouxiang"></i>
        <span class="s">
          <span>{{memberInfo.nickName}}</span>
          <span class="s1">id:{{memberInfo.mobileNo}}</span>
        </span>
        <van-cell title=" " is-link @click="gomessage"/>
      </div>
      <p>账号信息</p>
      <div class="content_text">
        <van-cell-group>
          <van-cell value="更换" is-link @click="gophone">
            <template slot="title">
              <span class="van-cell-text">手机号&ensp;&ensp;{{memberInfo.mobileNo}}</span>
            </template>
          </van-cell>
        </van-cell-group>
        <p>安全设置</p>
        <van-cell-group>
          <van-cell title="登录密码" :value="memberInfo.loginPassword?'修改':'未设置'" is-link @click="gosetpassword"/>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="支付密码" :value="memberInfo.payPassword?'修改':'未设置'" is-link @click="gosetpaypassword"/>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="实名认证" :value="authentication" is-link/>
        </van-cell-group>
      </div>
    </div>
    <div class="footer">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { selectBeeUser } from 'services/beeUser';

  export default {
    name: 'setmessage',
    data() {
      return {
        // userInfo: {
        //   name: 'cheng',
        //   idNumber: '411524199206156034'
        //   userNo:9663f2599f82468eb0dc5339c0a499a9
        // },
        authentication: '',
        memberInfo: {}
      };
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    created() {
      this.fetchData();
      this.fetchDetail();
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      gomessage() {
        this.$router.push('./message');
      },
      gophone() {
        this.$router.push('./setphone');
      },
      gosetpassword() {
        this.$router.push('../setpassword');
      },
      gosetpaypassword() {
        this.$router.push('./setpaypassword');
      },
      // gocertification(){
      //   this.$router.push('./certification')
      // },
      fetchDetail() {
        const { userNo } = this.userInfo;
        selectBeeUser({ userNo }).then(({ object }) => {
          this.memberInfo = object;
        });
      },
      //推出登录
      logout() {
        this.$store.dispatch('logout', this.userInfo).then(() => {
          this.$router.replace('/');
        });
      },
      //认证显示
      fetchData() {
        if (this.userInfo.name === '' || !this.userInfo.name) {
          this.authentication = '未认证';
        } else {
          const idNumber = this.userInfo.idNumber.substring(0, 3) + '************' + this.userInfo.idNumber.substring(15, 18);
          this.authentication = this.userInfo.name + idNumber;
        }
      }
    }
  };

</script>
<style lang="less" scoped>
  .content {
    font-size: 28px;
    .content_photo {
      margin-top: 30px;
      padding-left: 30px;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-yonghutouxiang {
        font-size: 120px;
        color: #e3e3e3;
      }
      .s {
        margin-left: 30px;
        font-size: 32px;
        .s1 {
          font-size: 26px;
        }
      }
    }
    p {
      margin: 0;
      padding-left: 30px;
      height: 70px;
      line-height: 70px;
      font-size: 26px;
    }
    .content_text {
      .van-cell {
        height: 90px;
      }
    }
  }

  .footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    button {
      height: 90px;
      width: 100%;
      border: none;
      background-color: #f7a427;
      font-size: 32px;
      color: #ffffff;
    }
  }
</style>
